Chromaticを使って爆速でStorybookをチームと共有する
現在着手中の案件ではReactを使ったtoC向けのWebアプリの開発を行なっています。かなりデザインに重点を置いているため、一定間隔でデザインチームとアプリのデザイン周りのフィードバック会を設けるのですが、STG環境をフィードバックの対象にするとThemeの切り替えやユーザーデータの更新をAPI越しに行う必要があり面倒な場面が出てきます。
そこでThemeやデータを柔軟に切り替えて確認できるStorybookをChromaticを使って簡単にチームメンバーと共有できるようにしました。
CI環境
案件ではGithub Actionsを使ってアプリのビルド、デプロイが終わったタイミングでスクリプトを流してChromatic上にStorybookをデプロイしています。
Chromaticとは
Chromaticは、UIフィードバックの収集、ビジュアルテスト、ドキュメンテーションを自動化することで、開発者は少ないマニュアル作業で迅速にイテレーションを行うことができます。
引用元：Chromatic
Storybookと繋げてデザインを公開したり、公開したデザインに対してコメントをつけたりテストや承認フローを追加したりできるサービスです。StorybookのMaintainerによって開発、メンテナンスされています。セットアップは2分で終わります。
Getrting Started
Storybookが導入されていることが前提です。Chromaticを既存のプロジェクトに追加します。
yarn add -D chromatic
次にGithubのアカウントを使用してChromaticにログインし、プロジェクトの作成とレポジトリの紐付けを行います。
プロジェクトごとに発行されるproject-tokenを使ってStorybookをデプロイします。
yarn chromatic --project-token=<project-token>
デプロイが完了するとURLが発行されるのでこのリンクを開発チームと共有します。
権限管理
特に設定しなければ指定したGithub レポジトリの閲覧権限がそのままURLの閲覧権限になります。閲覧者を個別に追加することもできます。
前回のデプロイとの差分を見る
ビルドを選択して前回のバージョンとの差分を確認できます。Githubと連携してコードレビューにUIレビューを組み込むことができます。
見た目の差分とDOMの差分の両方が確認できます。
コメントをつける
任意の場所にコメントを入れることもできます。
プルリクエストにUIレビューを追加する
Githubと連携してプルリクエストにUIレビューを追加します。
Changesetをレビューする
ビルド別に変更を確認できるので、Accept/Denyボタンでレビューします。Discussionやコメントの追加もできます。
スクリーンショット引用元：Review changeset
あとがき
Storybookを開発メンバーと共有できたらいいなと思ってChromaticを導入しましたが、思ったより機能が充実していてとても役立っています。実際の案件ではUIのレビュー機能はまだ使っていませんがぜひ活用していきたいです。
